<template>
  <view
    class="nav-bar"
    :style="{
      paddingBottom: pbFlag ? '12rpx' : '',
      paddingTop: $util.getStatusBarHeight(),
      position: position,
    }"
  >
    <view class="nav-bar-icons" v-if="leftIconList.length">
      <text
        v-for="(item, index) in leftIconList"
        :key="index"
        @click="iconTap(index)"
        :class="[`iconfont icon-${item}`]"
      ></text>
      <view
        v-if="title && inputObj && leftIconList.length < 2"
        class="mini-title"
        >{{ title }}</view
      >
    </view>
    <view
      v-if="title && !inputObj"
      :class="titleCenter ? 'nav-bar-center' : ''"
      style="z-index: 1"
      >{{ title }}</view
    >
    <view
      v-if="inputObj"
      class="nav-bar-input"
      :class="inputObj.center ? 'nav-bar-center' : ''"
      :style="{
        width: inputObj.width || 'auto',
        marginRight: inputObj.center ? 'auto' : '',
      }"
    >
      <text class="iconfont icon-chaxun"></text>
      <input
        confirm-type="search"
        @confirm="navSearch"
        v-model="inputObj.value"
        @blur="blur"
        placeholder-class="placeholder"
        :placeholder="inputObj.placeholder || ''"
      />
    </view>
    <view class="nav-bar-icons" v-if="rightIconList.length">
      <text
        v-for="(item, index) in rightIconList"
        :key="index"
        @click="iconTap(leftIconList.length + index)"
        :class="[`iconfont icon-${item}`]"
      ></text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    position: {
      type: String,
      default: "sticky",
      // default:'relative'
    },
    leftIconList: {
      type: Array,
      default: () => [],
    },
    rightIconList: {
      type: Array,
      default: () => [],
    },
    pbFlag: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "",
    },
    titleCenter: {
      type: Boolean,
      default: true,
    },
    blurSearch: {
      type: Boolean,
      default: true,
    },
    inputObj: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  methods: {
    iconTap(index) {
      this.$emit("iconTap", index);
    },
    blur() {
      console.log(this.blurSearch);
      if (this.blurSearch) {
        this.navSearch();
      }
    },
    navSearch() {
      this.$emit("navSearch", this.inputObj.value);
    },
  },
};
</script>
<style lang="scss" scoped>
.nav-bar {
  background-color: $theme-color;
  font-size: $big-font-size;
  text-align: center;
  color: #ffffff;
  height: 70rpx;
  line-height: 70rpx;
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100vw;
  align-items: center;
  // #ifdef MP-WEIXIN
  // width: 75vw;
  // padding-right: 25vw;
  // #endif
  top: 0;
  z-index: 1000;
  &-icons {
    z-index: 1000;
    display: flex;
    align-items: center;
    text {
      padding: 0 24rpx;
    }
    text:active {
      opacity: $default-disabled-opacity;
    }
    .mini-title {
      font-size: 24rpx;
      line-height: 20rpx;
    }
  }
  &-icons:first-child {
    margin-left: 10rpx;
  }
  &-icons:nth-child(2) {
    margin-right: 10rpx;
  }
  &-center {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
  }
  &-input {
    margin-right: 34rpx;
    padding-right: 20rpx;
    border-radius: $default-border-radius;
    text-align: left;
    background: $back-grey-color;
    color: $default-color;
    // font-size: $default-font-size;
    font-size: $small-font-size;
    display: flex;
    height: 52rpx;
    line-height: 52rpx;
    text {
      padding: 0 20rpx;
      height: 52rpx;
      line-height: 52rpx;
    }
    input {
      width: 95%;
      height: 52rpx;
      line-height: 52rpx;
    }
  }
}
</style>
